<template>
  <div class="friend-page">
    <el-row>
        <view-top></view-top>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>好友列表</span>
          </div>
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item v-for="friend in friends" :key="friend.id" @click="viewFriend(friend)">
                <el-avatar :src="friend.friendAvatar" size="40"></el-avatar>
                <span slot="title">{{ friend.friendName }}</span>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card" v-if="selectedFriend">
          <div slot="header" class="clearfix">
            <span>{{ selectedFriend.friendName }}的动态</span>
          </div>
          <div v-for="post in selectedFriend.posts" :key="post.id">
            <p>{{ post.content }}</p>
            <img :src="post.image" v-if="post.image" style="width: 100%;">
            <el-button type="text" @click="likePost(post)">点赞</el-button>
            <el-button type="text" @click="commentPost(post)">评论</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ViewTop from './ViewTop.vue';
export default {
  components:{
    ViewTop
  },
  data() {
    return {
      friends: [],
      selectedFriend: null
    };
  },
  mounted() {
    this.axios.get('/user/friend/list').then(response => {
      this.friends = response.data.data;
    }).catch(error => {
      console.error(error); 
    })
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    viewFriend(friend) {
      this.selectedFriend = friend;
      this.$router.push({
       path:"test",
       query:{
        toUser:friend.friendName
       }
      })
    },
    likePost(post) {
      post.likes++;
    },
    commentPost(post) {
      // 实现评论功能
    }
  }
};
</script>

<style scoped>
.friend-page {
  margin: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.scrollbar-wrapper {
  height: 400px;
}
</style>
